<!-- 需求：点击搜索之后跳转到对应搜索的店铺 -->

<template>
  <div class="search">
    <van-nav-bar
      class="dh"
      left-text="搜索"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="find">
      <input
        type="text"
        placeholder="搜索商家、商品名称"
        v-model="searchFind"
      />
      <span @click="find">搜索</span>
    </div>
    <div class="history">
      <h4>历史搜索</h4>
      <span v-for="(item, index) in list" :key="index">{{ item }}</span>
    </div>
    <div class="searchFind">
      <h4>搜索发现</h4>
      <span v-for="(item, index) in searchFindArr" :key="index">{{
        item
      }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchFind: "",
      list: ["云南过桥米线"],
      searchFindArr: [
        "麻辣烫",
        "米线",
        "披萨",
        "蛋糕",
        "汉堡",
        "腊八粥",
        "烤肉拌饭",
        "炸鸡",
        "味美多(温阳路店)",
      ],
    };
  },
  methods: {
    find() {
      if (this.searchFind) {
        this.list.push(this.searchFind);
        //   console.log(this.list);
        this.searchFind = "";
        this.$router.push("/index/searchResult");
      } else {
        alert("请输入商品或店铺名称");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.search {
  .find {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    input {
      height: 40px;
      outline: none;
      width: 100%;
      border: none;
      background: #f5f5f5;
      border-radius: 20px;
      padding-left: 30px;
    }
    span {
      width: 70px;
      text-align: center;
    }
  }
  .history {
    padding: 10px;
    span {
      padding: 10px;
      background: #f5f5f5;
      border-radius: 5px;
      margin-right: 10px;
      display: inline-block;
      margin-top: 10px;
    }
  }
  .searchFind {
    padding: 10px;
    span {
      padding: 10px;
      background: #f5f5f5;
      border-radius: 5px;
      margin-right: 10px;
      display: inline-block;
      margin-top: 10px;
    }
  }
}
</style>